import React from 'react';
import {
  HeartIcon,
  CodeBracketIcon,
  GlobeAltIcon,
  StarIcon,
} from '@heroicons/react/24/outline';
import { Button } from '@components/ui';
import { cn } from '@utils/index';

const About: React.FC = () => {
  const handleOpenGitHub = () => {
    // This would open the GitHub repository
    console.log('Open GitHub repository');
  };

  const handleOpenDocs = () => {
    // This would open the documentation
    console.log('Open documentation');
  };

  const technologies = [
    {
      name: 'Tauri',
      description:
        'Build smaller, faster, and more secure desktop applications',
      version: '2.0+',
      color: 'bg-blue-500',
    },
    {
      name: 'React',
      description: 'A JavaScript library for building user interfaces',
      version: '18.3+',
      color: 'bg-cyan-500',
    },
    {
      name: 'TypeScript',
      description: 'Typed JavaScript at any scale',
      version: '5.6+',
      color: 'bg-blue-600',
    },
    {
      name: 'Rust',
      description:
        'A language empowering everyone to build reliable and efficient software',
      version: '1.70+',
      color: 'bg-orange-600',
    },
    {
      name: 'Tailwind CSS',
      description: 'A utility-first CSS framework for rapid UI development',
      version: '3.4+',
      color: 'bg-teal-500',
    },
    {
      name: 'Vite',
      description: 'Next generation frontend tooling',
      version: '6.0+',
      color: 'bg-purple-500',
    },
  ];

  const contributors = [
    {
      name: 'Tauri Team',
      role: 'Framework Development',
      avatar: '🦀',
    },
    {
      name: 'React Team',
      role: 'UI Library',
      avatar: '⚛️',
    },
    {
      name: 'Community',
      role: 'Feedback & Contributions',
      avatar: '👥',
    },
  ];

  return (
    <div className="mx-auto max-w-4xl">
      {/* Header */}
      <div className="mb-12 text-center">
        <div className="mb-6 inline-flex h-20 w-20 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900">
          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-500">
            <div className="h-6 w-6 rounded-sm bg-white"></div>
          </div>
        </div>

        <h1 className="mb-4 text-4xl font-bold text-gray-900 dark:text-gray-100">
          Tauri Modern Template
        </h1>

        <p className="mb-6 text-xl text-gray-600 dark:text-gray-400">
          Version 1.0.0
        </p>

        <p className="mx-auto max-w-2xl text-lg text-gray-700 dark:text-gray-300">
          A comprehensive template for building modern desktop applications with
          the latest web technologies and Rust performance.
        </p>
      </div>

      {/* Description */}
      <div className="mb-8 rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
        <h2 className="mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-100">
          About This Template
        </h2>

        <div className="prose max-w-none dark:prose-invert">
          <p className="mb-4 text-gray-700 dark:text-gray-300">
            This template provides a solid foundation for building
            cross-platform desktop applications using Tauri. It combines the
            power of Rust for the backend with modern web technologies for the
            frontend, resulting in fast, secure, and lightweight applications.
          </p>

          <p className="mb-4 text-gray-700 dark:text-gray-300">
            The template includes essential features like window management,
            system tray integration, notifications, file operations, global
            shortcuts, and more. It's designed with best practices in mind and
            follows modern development patterns.
          </p>

          <p className="text-gray-700 dark:text-gray-300">
            Whether you're building a simple utility or a complex application,
            this template gives you the tools and structure you need to get
            started quickly and build something amazing.
          </p>
        </div>
      </div>

      {/* Technologies */}
      <div className="mb-8">
        <h2 className="mb-6 text-2xl font-semibold text-gray-900 dark:text-gray-100">
          Built With
        </h2>

        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
          {technologies.map((tech, index) => (
            <div
              key={index}
              className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800"
            >
              <div className="mb-3 flex items-center">
                <div className={cn('mr-3 h-3 w-3 rounded-full', tech.color)} />
                <h3 className="font-semibold text-gray-900 dark:text-gray-100">
                  {tech.name}
                </h3>
                <span className="ml-auto rounded bg-gray-100 px-2 py-1 text-xs text-gray-500 dark:bg-gray-700 dark:text-gray-400">
                  {tech.version}
                </span>
              </div>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                {tech.description}
              </p>
            </div>
          ))}
        </div>
      </div>

      {/* Features */}
      <div className="mb-8 rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
        <h2 className="mb-6 text-2xl font-semibold text-gray-900 dark:text-gray-100">
          Key Features
        </h2>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
          <div>
            <h3 className="mb-3 font-semibold text-gray-900 dark:text-gray-100">
              Frontend Features
            </h3>
            <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
              <li>• React 18 with TypeScript</li>
              <li>• Tailwind CSS for styling</li>
              <li>• Zustand for state management</li>
              <li>• React Router for navigation</li>
              <li>• Custom hooks for Tauri integration</li>
              <li>• Responsive design</li>
              <li>• Dark mode support</li>
              <li>• Hot reload development</li>
            </ul>
          </div>

          <div>
            <h3 className="mb-3 font-semibold text-gray-900 dark:text-gray-100">
              Backend Features
            </h3>
            <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
              <li>• Rust backend with Tauri</li>
              <li>• SQLite database integration</li>
              <li>• File system operations</li>
              <li>• System notifications</li>
              <li>• Global shortcuts</li>
              <li>• Window management</li>
              <li>• System tray support</li>
              <li>• Cross-platform compatibility</li>
            </ul>
          </div>
        </div>
      </div>

      {/* Contributors */}
      <div className="mb-8 rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
        <h2 className="mb-6 text-2xl font-semibold text-gray-900 dark:text-gray-100">
          Acknowledgments
        </h2>

        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
          {contributors.map((contributor, index) => (
            <div key={index} className="text-center">
              <div className="mb-2 text-4xl">{contributor.avatar}</div>
              <h3 className="font-semibold text-gray-900 dark:text-gray-100">
                {contributor.name}
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                {contributor.role}
              </p>
            </div>
          ))}
        </div>
      </div>

      {/* Actions */}
      <div className="text-center">
        <div className="flex flex-wrap justify-center gap-4">
          <Button onClick={handleOpenGitHub}>
            <CodeBracketIcon className="mr-2 h-4 w-4" />
            View on GitHub
          </Button>

          <Button variant="outline" onClick={handleOpenDocs}>
            <GlobeAltIcon className="mr-2 h-4 w-4" />
            Documentation
          </Button>

          <Button variant="ghost">
            <StarIcon className="mr-2 h-4 w-4" />
            Star on GitHub
          </Button>
        </div>

        <p className="mt-6 text-sm text-gray-500 dark:text-gray-400">
          Made with <HeartIcon className="inline h-4 w-4 text-red-500" /> by the
          community
        </p>
      </div>
    </div>
  );
};

export default About;
